<template>
    <div>
        <div class="goods-relevant">
            <div class="header">
                <i></i>
                <span>同类商品推荐</span>
            </div>
            <div class="xtx-carousel">
                <ul class="carousel-body">
                    <el-carousel :loop="true" :autoplay="false"  trigger="click" height="380px">
                    <el-carousel-item class="el-car-item" v-for="(A, index) in relevantList" :key="index">
                    <li v-for="(B,index2) in A" :key="index2" @click="carousel(B)">
                    <img class="top-img" :src="B.picture" :alt="B.title" />
                    <p>{{B.name}}</p>
                    <p class="price">{{B.price}}</p>
                    </li>
                    </el-carousel-item>
                </el-carousel>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'VueProject01Commodity',

    data() {
        return {
            relevantList:[],
        };
    },

    mounted() {
        this.relevantData()
        // this.$watch(()=>{

            
    //  })
    },
    watch: {
        '$route':'relevantData'
    },
    methods: {
        relevantData(){
            this.axios.get(`https://apipc-xiaotuxian-front.itheima.net/goods/relevant?id=${this.$route.query.id}&limit=16`).then(res=>{
                if(res.data){
                    this.relevantList=res.data.result
                let newDataList = []
                let current = 0
                if(this.relevantList && this.relevantList.length>0){
                    for(let i=0;i<=this.relevantList.length-1;i++){
                        if(i%4 !== 0 || i === 0 ){
                            if(!newDataList[current]){
                                newDataList.push([this.relevantList[i]])
                        }else{
                            newDataList[current].push(this.relevantList[i])
                        }
                    }else{
                        current++
                        newDataList.push([this.relevantList[i]])
                    }
                    }
                }
                this.relevantList = [...newDataList]
                }
            })
        },
        carousel(B){
            this.$nextTick(function () {
                this.$router.push({ 
                    path:"/product",　　　　
                    query:{id:B.id} 
                }) 
            });
        },
    },
};
</script>

<style scoped lang='scss'>
.goods-relevant{
    width: 1240px;
    margin: 20px auto;
    background: #fff;
    min-height: 460px;
    // margin-top: 20px;
    .header{
        height: 80px;
        line-height: 80px;
        padding: 0 20px;
        text-align: left;
        i{
            width: 16px;
            height: 16px;
            display: inline-block;
            border-top: 4px solid #27ba9b;
            border-right: 4px solid #27ba9b;
            box-sizing: border-box;
            position: relative;
            transform: rotate(45deg);
            &::before{
                content: "";
                width: 10px;
                height: 10px;
                position: absolute;
                left: 0;
                top: 2px;
                background: #bcf1e6;
            }
        }
        span{
            font-size: 20px;
            padding-left: 10px;
        }
    }
    .xtx-carousel{
        width: 100%;
        height: 380px;
        min-width: 300px;
        min-height: 150px;
        position: relative;
        .carousel-body{
            width: 100%;
            height: 100%;
            li{
                width: 240px;
                cursor: pointer;
            }
            .el-car-item {
            width: 100%;
            display: flex;
            }
            .top-img{
                box-sizing: border-box;
                padding: 20px;
                width: 230px!important;
                height: 230px!important;
            }
            p{
                font-size: 16px;
                color: #666;
                padding: 0 40px;
                white-space: nowrap; //禁止换行
                overflow: hidden;
                text-overflow: ellipsis; //...
            }
            .price{
                font-size: 16px;
                color: #cf4444;
                margin-top: 15px;
            }
        }
        .el-car-item{
            padding: 0 50px;
            justify-content: space-between;
            box-sizing: border-box;
        }
        ::v-deep .el-carousel__button{
            display: inline-block;
            width: 12px;
            height: 12px;
            // background: rgba(0,0,0,.2) !important;
            background: #27ba9b;
            border-radius: 50%;
            cursor: pointer;
        }
        
    }
}
</style>